<template>
  <div class="login_container">
    <div class="SystemName">
      <span class="SystemNameText">ERP采购管理系统</span>
    </div>
    <div class="avatar_box">
      <span>用户注册</span>
    </div>
    <div class="login_box">

      <!-- 登录表单区域 -->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login_form">
        <el-form-item label="登录名称" prop="username"  placeholder="请输入登录名称">
          <el-input v-model.number="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="tel">
          <el-input type="number" v-model="ruleForm.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"  placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"  placeholder="确认密码"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="rigistered('ruleForm')">确定注册</el-button>
          <el-button type="info" @click="goLogin">已有账号？立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Account from '@/api/account'
  export default {
    data() {
      // <!--验证手机号是否合法-->
      let checkTel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码'))
        } else if (!this.checkMobile(value)) {
          callback(new Error('手机号码不合法'))
        } else {
          callback()
        }
      }
      // <!--验证密码-->
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      // <!--二次验证密码-->
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        // 这是登录表单的数据绑定对象
        ruleForm: {
          username: '',
          tel: '',
          pass: '',
          checkPass: '',
        },
        // 这是表单的验证规则对象
        rules: {
          // 验证用户名是否合法
          username: [
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          // 验证密码是否合法
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          tel: [{ validator: checkTel, trigger: 'change' }],

        }
      }
    },
    methods: {
      // 点击重置按钮，重置登录表单
      resetLoginForm() {
        // console.log(this);
        // this.$refs.loginFormRef.resetFields()
      },
      rigistered(ruleForm2) {
        let validate = false;
        this.$refs[ruleForm2].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }
        let data = {
          username:this.ruleForm.username,
          phonenumber:this.ruleForm.tel,
          password:this.ruleForm.pass,
          address:'',
          sex:'',
        }

        Account.regusted(data)
          .then(res => {
            // 返回数据
            if (res.flag){
              this.$message.success('注册成功');
              this.ruleForm.username = ''
              this.ruleForm.tel = ''
              this.ruleForm.pass = ''
            }else {
              this.$message.error(res.message);
              this.ruleForm.username = '';
            }

          })
          .catch(err => {
            // 异常情况
          })
      },
      goLogin(){
        this.$router.push('/');
      },
      // 验证手机号
      checkMobile(str) {
        let re = /^1\d{10}$/
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      }
    }
  }
</script>

<style scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }
  .login_box {
    width: 600px;
    height: 600px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .SystemName{
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    z-index: 29;
  }
  .SystemNameText{
    font-size: 30px;
    color: #f9fafc;
  }
  .avatar_box {
    position: absolute;
    left: 50%;
    top:25%;
    transform: translateX(-50%);
    color: #f9fafc;
    font-size: 16px;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
  .login_form {
    position: absolute;
    top:10%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
</style>
